import React, { RefObject, useState } from 'react'
import {
    Form,
    Input,
    Button,
    Dialog,
    Radio,
    Space
} from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'
import styles from "../../css/register.module.less"
import { userRegister } from "../../service/mineService"
export default function Register({setActiveKey}:any) {
    const [value, setValue] = useState('')
    const [visible, setVisible] = useState(false)
    const onFinish = async (values: any) => {
        // Dialog.alert({
        //     content: <pre>{JSON.stringify(values, null, 2)}</pre>,
        // })
        //把数据写入数据库
        //登录页面
        
        let res = await userRegister(values);
        if (res.data.code === 200) {
            //成功以后跳转
            setActiveKey("login");
        } else {
            Dialog.alert({
                content: res.data.msg,
            })
        }
    }
    return (

        <Form
            layout='horizontal'
            name='form'
            onFinish={onFinish}
            footer={
                <Button block type='submit' color='primary' size='large'>
                    提交
                </Button>
            }
        >
            <Form.Header>请认真填写</Form.Header>
            <Form.Item name='userName' label='姓名' rules={[{ required: true }]}>
                <Input placeholder='请输入姓名' />
            </Form.Item>
            <Form.Item name='password' label='密码' rules={[{ required: true }]} extra={<div className={styles.eye} style={{ float: "right", display: "inline-block" }}>
                {!visible ? (
                    <EyeInvisibleOutline onClick={() => setVisible(true)} />
                ) : (
                    <EyeOutline onClick={() => setVisible(false)} />
                )}
            </div>}>
                <Input
                    className={styles.input}
                    placeholder='请输入密码'
                    type={visible ? 'text' : 'password'}
                />

            </Form.Item>
            <Form.Item name='phonenumber' label='手机号' rules={[{ required: true, message: "不能为空" }, {
                pattern: /^1[3-9][0-9]{9}$/, message: "请输入常用的11位手机号"
            }]}>
                <Input placeholder='请输入常用的手机号' />
            </Form.Item>
            <Form.Item name="sex" label="性别" rules={[{ required: true }]}>
                <Radio.Group>
                    <Space >
                        <Radio value='0'>男</Radio>
                        <Radio value='1'>女</Radio>
                    </Space>
                </Radio.Group>
            </Form.Item>




        </Form>
    )
}
